/**
 * 用于设计页面上节点的事件处理
 */
import OdManager from "../ods/OdManager";


function loadStyle(styleObj) {
    let styledoms = $('#style').find('[od-style]')
    for(let i = 0;i < styledoms.length; i++){
        let dom = $(styledoms[i]),
            style = dom.attr('od-style')
        let attr = style.replace(/\-(\w)/g, (all, letter) => {
            return letter.toUpperCase()
        })
        if(dom.attr('type') === 'checkbox' || dom.attr('type') === 'radio') {
            dom.removeAttr('checked')
        }
        if(styleObj[attr] !== undefined) {
            if(dom.attr('type') === 'checkbox' || dom.attr('type') === 'radio'){
                if(styleObj[attr]){
                    dom.prop('checked', true)
                }else {
                    dom.removeAttr('checked')
                }
            }else {
                dom.val(styleObj[attr])
            }
        }else {
            dom.val('')
        }
    }
}
function disableStyle() {
    $('#style').find('[od-style]').disable()
}
export function event(project) {
    $(document).on('click', '.context-tab-title', function(e) {
        let siblings = $(this).siblings()
        let cur = ''
        for(let i = 0;i < siblings.length;i++){
            let item = siblings[i]
            if($(item).hasClass('active')) {
                $(item).removeClass('active')
                cur = $(item).attr('tab-target')
            }
        }
        $(this).addClass('active')
        let target = $(this).attr('tab-target')
        let content = $(this).parent().next('.context-tab-content')
        content.children('.context-tab-content-item.active').removeClass('active')
        content.children(`.context-tab-content-item[tab-index=${target}]`).addClass('active')

        if(target === 'file') {
            project.view_manager.cur_scene = 'file'
            project.view_manager.view.menu = 'file'
        }else if(target === 'ui'){
            project.view_manager.cur_scene = 'od'
            project.view_manager.view.menu = 'ui'
        }else if(target === 'style') {
            project.view_manager.view.attr = 'style'
        }else if(target === 'attribute') {
            project.view_manager.view.attr = 'attribute'
        }else if(target === 'event') {
            project.view_manager.view.attr = 'event'
        }
    })
    $('#editor').on('click', '[selectionable]', function(e){
        e.stopPropagation()
        project.view_manager.cur_scene = 'selectionable'

        if(project.view_manager.cur_selectionable !== undefined
            && project.view_manager.cur_selectionable !== '') {
            $(project.view_manager.cur_selectionable).removeClass('selected')
        }
        if(project.view_manager.cur_od !== undefined
            && project.view_manager.cur_od !== '') {
            $(project.view_manager.cur_od).removeClass('selected')
        }
        project.view_manager.cur_selectionable = this
        project.cur_od = ''
        $(e.target).addClass('selected')
        let odStyle = project.view_manager.cur_selectionable.getAttribute('od-style')
        odStyle = odStyle?odStyle:'{}'
        let styleObj = JSON.parse(odStyle)
        loadStyle(styleObj)
    })
    $('#editor').on('click', '[action-view]',function(e){
        e.stopPropagation()
        project.view_manager.cur_scene = 'od'
        if(project.view_manager.cur_selectionable !== undefined
            && project.view_manager.cur_selectionable !== '') {
            $(project.view_manager.cur_selectionable).removeClass('selected')
        }
        if(project.view_manager.cur_od !== undefined
            && project.view_manager.cur_od !== '') {
            $(project.view_manager.cur_od).removeClass('selected')
        }
        project.view_manager.cur_od = $(this).children('.od-view').children()[0]
        $(project.view_manager.cur_od).addClass('selected')
        project.cur_selectionable = ''
        let od = this.getAttribute('action-view')
        let odStyle = $(project.view_manager.cur_od).attr('od-style')
        odStyle = odStyle?odStyle:'{}'
        let styleObj = JSON.parse(odStyle)
        loadStyle(styleObj)
        let odView = OdManager.ods[od]
        $("#attribute").html(odView.props)
        $("#events").html(odView.events)
        odView.on_select_for_props && odView.on_select_for_props(project)
        odView.on_select_for_events && odView.on_select_for_events(project)
    })
    $("#attribute").on('click', '[on-click]', function(e) {
        e.stopPropagation()
        //判断是否为选中的Od
        if(project.view_manager.cur_scene === 'od'
            && project.view_manager.cur_od !== undefined
            && project.view_manager.cur_od !== '') {
            let odView = $(project.view_manager.cur_od).parent().parent().attr('action-view')
            let od = OdManager.ods[odView]
            let click = $(this).attr('on-click')
            let callback = od.propsSetFn[click]?
                        od.propsSetFn[click]:od.otherFn[click]?
                        od.otherFn[click]:null
            console.log(callback)
            callback && callback(project, e)
        }
    })
    $("#attribute").on('change', '[on-change]', function(e){
        e.stopPropagation()
        //判断是否为选中的Od
        if(project.view_manager.cur_scene === 'od'
            && project.view_manager.cur_od !== undefined
            && project.view_manager.cur_od !== '') {
            let odView = $(project.view_manager.cur_od).parent().parent().attr('action-view')
            let od = OdManager.ods[odView]
            let click = $(this).attr('on-change')
            let callback = od.propsSetFn[click]?
                od.propsSetFn[click]:od.otherFn[click]?
                    od.otherFn[click]:null
            callback && callback(project, e)
        }
    })

    $("#events").on('click', '[on-click]',function(e){
        e.stopPropagation()
        //判断是否为选中的Od
        if(project.view_manager.cur_scene === 'od'
            && project.view_manager.cur_od !== undefined
            && project.view_manager.cur_od !== '') {
            let odView = $(project.view_manager.cur_od).parent().parent().attr('action-view')
            let od = OdManager.ods[odView]
            let click = $(this).attr('on-click')
            let callback = od.eventsFn[click]?
                od.eventsFn[click]:od.otherFn[click]?
                    od.otherFn[click]:null
            callback && callback(project, e)
        }
    })
    $("#events").on('change', '[on-change]', function(e) {
        e.stopPropagation()
        //判断是否为选中的Od
        if(project.view_manager.cur_scene === 'od'
            && project.view_manager.cur_od !== undefined
            && project.view_manager.cur_od !== '') {
            let odView = $(project.view_manager.cur_od).parent().parent().attr('action-view')
            let od = OdManager.ods[odView]
            let click = $(this).attr('on-change')
            let callback = od.eventsFn[click]?
                od.eventsFn[click]:od.otherFn[click]?
                    od.otherFn[click]:null
            callback && callback(project, e)
        }
    })
    document.getElementById('style').addEventListener('change', function(e){
        let target = e.target
        if(target.getAttribute('od-style') !== undefined
            && target.getAttribute('od-style') !== ''){
            e.stopPropagation()
            //判断当前是否为od模式或selectionable
            if(project.view_manager.cur_scene !== 'od' && project.view_manager.cur_scene !== 'selectionable'){
                return
            }
            //获取操作对象
            let dom = null
            if(project.view_manager.cur_scene === 'od'
                && project.view_manager.cur_od !== undefined
                && project.view_manager.cur_od !== '') {
                dom = project.view_manager.cur_od
            }else if(project.view_manager.cur_scene === 'selectionable'
                && project.view_manager.cur_selectionable !== undefined
                && project.view_manager.cur_selectionable !== ''){
                dom = project.view_manager.cur_selectionable
            }
            if(dom === null) {
                return
            }
            let style = target.getAttribute('od-style')
            let domStyle = dom.getAttribute('od-style')
            domStyle = domStyle?domStyle:'{}'
            let styleObj = JSON.parse(domStyle)
            let $dom = $(dom)
            switch(style){
                case 'width':
                    $dom.css('width', target.value + 'px' )
                    styleObj.width = target.value
                    break
                case 'height':
                    $dom.css('height', target.value + 'px')
                    styleObj.height = target.value
                    break
                case 'background':
                    $dom.css('background', target.value)
                    styleObj.background = target.value
                    break
                case 'font-bold':
                    if(target.checked) {
                        $dom.css('font-weight', 'bold')
                        styleObj.fontBold = true
                    }else {
                        $dom.css('font-weight', '')
                        styleObj.fontBold = undefined
                    }
                    break
                case 'font-italic':
                    if(target.checked){
                        $dom.css('font-style', 'italic')
                        styleObj.fontItalic = true
                    }else{
                        $dom.css('font-style', '')
                        styleObj.fontItalic = undefined
                    }
                    break
                case 'font-underline':
                    if(target.checked){
                        $dom.css('text-decoration', 'underline')
                        styleObj.fontUnderline = true
                    }else {
                        $dom.css('text-decoration', '')
                        styleObj.fontUnderline = undefined
                    }
                    break
                case 'align-center':
                    if(target.checked){
                        $dom.css('text-align', 'center')
                        styleObj.alignCenter = true
                        styleObj.alignJustify = false
                        styleObj.alignLeft = false
                        styleObj.alignRight = false
                    }else {
                        $dom.css('text-align' , null)
                        styleObj.alignCenter = false
                    }
                    break
                case 'align-justify':
                    if(target.checked){
                        $dom.css('text-align', 'justify')
                        styleObj.alignCenter = false
                        styleObj.alignJustify = true
                        styleObj.alignLeft = false
                        styleObj.alignRight = false
                    }else{
                        $dom.css('text-align', null)
                        styleObj.alignJustify = false
                    }
                    break
                case 'align-left':
                    if(target.checked) {
                        $dom.css('text-align', 'left')
                        styleObj.alignCenter = false
                        styleObj.alignJustify = false
                        styleObj.alignLeft = true
                        styleObj.alignRight = false
                    }else {
                        $dom.css('text-align', null)
                        styleObj.alignLeft = false
                    }
                    break
                case 'align-right':
                    if(target.checked) {
                        $dom.css('text-align', 'right')
                        styleObj.alignCenter = false
                        styleObj.alignJustify = false
                        styleObj.alignLeft = false
                        styleObj.alignRight = true
                    }else {
                        $dom.css('text-align', null)
                        styleObj.alignRight = false
                    }
                    break
                case 'font-family':
                    $dom.css('font-family', target.value)
                    styleObj.fontFamily = target.value
                    break
                case 'font-size':
                    $dom.css('font-size', target.value + 'px')
                    styleObj.fontSize = target.value
                    break
                case 'color':
                    $dom.css('color' , target.value)
                    styleObj.color = target.value
                    break
                case 'border-top-width':
                    if(target.value !== ''){
                        $dom.css('border-top-style', 'solid')
                        $dom.css('border-top-width', target.value + 'px')
                        styleObj.borderTopWidth = target.value
                    }
                    break
                case 'border-top-color':
                    $dom.css('border-top-color', target.value)
                    styleObj.borderTopColor = target.value
                    break
                case 'border-bottom-width':
                    if(target.value !== ''){
                        $dom.css('border-bottom-style', 'solid')
                        $dom.css('border-bottom-width', target.value + 'px')
                        styleObj.borderBottomWidth = target.value
                    }
                    break
                case 'border-bottom-color':
                    $dom.css('border-bottom-color', target.value)
                    styleObj.borderBottomColor = target.value
                    break
                case 'border-left-width':
                    if(target.value !== ''){
                        $dom.css('border-left-style', 'solid')
                        $dom.css('border-left-width', target.value + 'px')
                        styleObj.borderLeftWidth = target.value
                    }
                    break
                case 'border-left-color':
                    $dom.css('border-left-color', target.value)
                    styleObj.borderLeftColor = target.value
                    break
                case 'border-right-width':
                    if(target.value !== ''){
                        $dom.css('border-right-style', 'solid')
                        $dom.css('border-right-width', target.value + 'px')
                        styleObj.borderRightWidth = target.value
                    }
                    break
                case 'border-right-color':
                    $dom.css('border-right-color', target.value)
                    styleObj.borderRightColor = target.value
                    break
                case 'padding-top':
                case 'padding-bottom':
                case 'padding-left':
                case 'padding-right':
                case 'margin-top':
                case 'margin-bottom':
                case 'margin-left':
                case 'margin-right':
                    $dom.css(style, target.value + 'px')
                    let attr = style.replace(/\-(\w)/g, (all, letter) => {
                        return letter.toUpperCase()
                    })
                    styleObj[attr] = target.value
                    break

            }
            dom.setAttribute('od-style', JSON.stringify(styleObj))
        }
    }, false)
}

